<template>
  <div>
    <section style="height: 70px"></section>
    <section>
      <div class="container">
        <div class="lead mt-4 mb-4">我的订单&nbsp;&nbsp;<el-icon :size="30" style="vertical-align: top"
            ><Tickets /></el-icon></div>
        <div class="row">
          <div class="col-md-6 mb-5" v-for="item in state.orderList" :key="item.id">
          <el-card>
         <div> 订单编号：{{ item.id }}</div>
         <div> 创建时间：{{ item.createTime }}</div>
         <div>  订单价格：{{ item.totalMoney }}元</div>
         <div>  订单状态：
          <span v-if="item.state=='已支付'" class="text-success">{{ item.state }}</span>
          <span v-if="item.state=='待支付'">{{ item.state }}</span>
         </div>
         <div class="text-end"  v-if="item.state=='已支付'">
            <div class="lead text-success">{{ item.state }}</div>
         </div>
         <div class="text-end"  v-if="item.state=='待支付'">
         <el-button type="info" @click="cancelOrder(item.id)">取消订单</el-button>
         <el-button type="success" @click="pay(item)">立即支付</el-button>
         </div>
          </el-card>
          </div>
          <div style="width:100%" v-if="!(state.orderList.length)">
            <el-empty description="暂时订单" />
          </div>
        </div>
        <div class="demo-pagination-block" style="margin: 30px 0px">
          <el-pagination
            v-model:current-page="state.search.page"
            v-model:page-size="state.search.limit"
            :page-sizes="
              state.search.total <= 40
                ? [5, 10, 15, 20]
                : [5, 10, 15, 20, state.search.total]
            "
            :disabled="false"
            :background="true"
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="state.search.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted, defineEmits } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { Tickets } from "@element-plus/icons-vue";
import { ElTable } from "element-plus";
import { useRoute } from "vue-router";
import router from "../../router";
import request from "../../api/request";
import { useUserCounterStore } from "../../store/oneselfInfo";

const store = useUserCounterStore();
let onesInfo = ref({});

onBeforeMount(() => {
  onesInfo.value = store.getInfo();
  if (onesInfo.value.id == null) {
    ElMessage({
      type: "error",
      message: "先登录",
    });
    let params = "order";
    router.push("/login?params="+ params);
    return false;
  }
  initData()
});
const id = onesInfo.id
const state = reactive({
  search: {
    limit: 5,
    page: 1,
    userId: ""
  },
  orderList: [],
});
const initData = () => {
  state.search.userId = onesInfo.value.id
  request.post("/order/list", state.search).then((res) => {
    if (res.code == 200) {
      state.orderList = res.data.records;
      state.search.total = res.data.total;
    }
  });
};
const cancelOrder = (id) => {
  ElMessageBox.confirm(`您确定删除吗`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(() => {
      request.post("/order/remove", id.toString()).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: res.msg,
          });
          initData();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
const pay = (order) =>{
  window.open("http://localhost:9096/alipay/pay?subject="+ order.id +"&traceNo="+ order.id+"&totalAmount="+order.totalMoney)
}
const handleCurrentChange = (page) => {
  state.search.page = page;
  initData();
};

const handleSizeChange = (limit) => {
  state.search.limit = limit;
  initData();
};


</script>
<style scoped lang="scss">
.count-box {
  text-align: end;
  padding: 30px;
}
</style>
